<html>
  <head></head>
  <style>
    #box {
      display: flex;
      align-items: center;
      padding: 20px;
    }
    #btn_1,
    #btn_2,
    #link {
      box-sizing: border-box;
      display: inline-block;
      height: 28px;
      padding: 4px 6px;
      border: 1px solid palevioletred;
      cursor: pointer;
      margin-right: 10px;
    }
  </style>
  <body>
    <div id="box">
      <button id="btn_1">事件冒泡</button>
      <button id="btn_2">取消冒泡</button>
      <a id="link" href="https://www.baidu.com">baidu.com</a>
    </div>
    <script>
      // 事件绑定通用方法
      function bindEvent(elem, type, fn) {
        elem.addEventListener(type, fn)
      }

      const btn_1 = document.getElementById('btn_1')
      const btn_2 = document.getElementById('btn_2')
      const box = document.getElementById('box')

      bindEvent(btn_1, 'click', function (e) {
        console.log('事件冒泡')
      })
      bindEvent(btn_2, 'click', function (e) {
        // 取消冒泡
        e.stopPropagation()
        console.log('取消冒泡')
      })
      bindEvent(box, 'click', function (e) {
        // 取消默认事件
        e.preventDefault()
        console.log('取消默认事件')
      })
    </script>
  </body>
</html>
